﻿<html>
    <head>
        <title>Simple browser</title>
        <style> 
        span#appname 
        {
            assigned! : self:value = application_name(); 
        }
       
        .button 
        { 
	        width:18px; height:18px; 
	        padding:4px; margin:1px;
	        border:1px solid transparent;	        
	        behavior: clickable;
	        cursor: pointer;
        }
        .button:hover 
        { 
            background-color:#F5FCF0 #EEF5E7 #DDE3D0 #EEF5E7;  
            border-top: solid 1px #F5FCF0;
            border-left: solid 1px #F5FCF0;
            border-right: solid 1px #A3A8A0;
            border-bottom: solid 1px #A3A8A0;
        }
        .button:active 
        { 
            background-color:#DDE3D0 #EEF5E7 #F5FCF0 #EEF5E7;  
            padding:5px 3px 3px 5px;
            border-top: solid 1px #A3A8A0;
            border-left: solid 1px #A3A8A0;
            border-right: solid 1px #F5FCF0;
            border-bottom: solid 1px #F5FCF0;
        }
        .toolbar 
        { 
        	flow: horizontal; 
        }        
        #content 
        { 
            border-top: solid 1px #A3A8A0;
            border-left: solid 1px #A3A8A0;
            border-right: solid 1px #F5FCF0;
            border-bottom: solid 1px #F5FCF0;

        	width: 100%%; 
        	height: 100%%; 
        }
        body 
        { 
        	width: 100%; height: 100%;
        	overflow: hidden;
            margin: 0px 0px 0px 0px;
            font-family: Verdana Tahoma System; 
            background-color:#EEF5E4; 
        }
        </style>
    </head>    
    <body>
        <div class="toolbar">
            <div id="open" class="button"><img src="images/open.png" /></div>
            <div id="reload" class="button"><img src="images/redo.png" /></div>
            <div class="button" style="width: 100%%">Application name: <span #appname></span></div>
        </div>
        <div id="content">content</div>
    </body>
</html>